<!-- 企业认证 -->
<template>
  <div class="enterpriseCertificationPage">
    <NavBarHeader class="navBarHeader"></NavBarHeader>
    <div class="container">
      <el-breadcrumb separator="/" class="titleBread">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item
          :to="{ path: '/personal', query: { navBarIndex: 1 } }"
          >个人中心</el-breadcrumb-item
        >
        <el-breadcrumb-item>实名认证</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <img
          src="./../../../../../public/img/personal/qiyeIcon.png"
          class="realNameImg"
        />
      </div>
      <div class="flexList">
        <div class="flexItem">
          <div>
            <span class="styleColor">*</span>
            <span class="titleName">营业执照说明：</span>
          </div>
          <div class="titleInfoName">
            <div>
              1.上传营业执照为扫描原件彩色扫描件或复印件（加盖贵司公章）,请确保信息清晰可辨
            </div>
            <div>2.支持jpg、jpeg、png、gif、bmp格式,且照片小于5M</div>
            <div>
              3.上传贵司最新、有效的营业执照，即可轻松获得身份认证，我们承诺该营业执照不会用于其他商业用途
            </div>
          </div>
        </div>
        <div class="upImgBox">
          <el-upload
            ref="upload1"
            action
            list-type="picture-card"
            :limit="limitCount"
            :auto-upload="false"
            class="upImgBox1"
            accept="image/*"
            :on-change="fileChange"
            :before-upload="beforeAvatarUpload"
            :http-request="getUploadlicense"
            :class="{ hide: hideUpload }"
          >
            <img
              src="./../../../../../public/img/personal/BusinessImg.png"
              class="upLoadImg1"
            />
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" />
          </el-dialog>
        </div>
        <div class="upImgName">(点击上传营业执照)</div>
        <!-- input区域 -->
        <div class="upInputBox">
          <div class="titleInput"><span>*</span>执照信息：</div>
          <div class="inputBox">
            <div class="itemInputBox">
              <el-input
                class="itemInput"
                placeholder="企业名称"
                v-model="listData.name"
              ></el-input>
              <el-date-picker
                v-model="listData.establish_date"
                type="date"
                placeholder="选择日期"
                class="itemInput1"
                value-format="yyyy-MM-dd"
                :clearable="false"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
              <div class="inputTypeBox">
                <el-input
                  class="itemInput2"
                  placeholder="统一社会信用代码"
                  v-model="listData.reg_num"
                ></el-input>
                <el-input
                  class="itemInput2"
                  placeholder="类型"
                  v-model="listData.type"
                ></el-input>
              </div>
              <div class="inputTypeBox">
                <el-input
                  class="itemInput2"
                  placeholder="法人代表"
                  v-model="listData.person"
                ></el-input>
                <el-input
                  class="itemInput2"
                  placeholder="经营场所"
                  v-model="listData.address"
                ></el-input>
              </div>
              <div class="inputTypeBox">
                <el-input
                  class="itemInput"
                  placeholder="经营范围"
                  v-model="listData.business"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="footerInputBox">
          <div class="footerItem">
            <div class="openName">开户名称：</div>
            <div class="openNameBox">
              <el-input
                class="itemInput3"
                placeholder="需与主体证件机构名称一致"
                v-model="subjectValue"
              ></el-input>
            </div>
          </div>
          <div class="bankBox">
            <div class="itemBank">
              <div class="openName">开户银行：</div>
              <div>
                <el-input
                  v-model="openValue"
                  placeholder="请输入开户银行"
                  class="itemInput4"
                ></el-input>
              </div>
            </div>
            <div class="itemBank1">
              <div class="openName">银行账户：</div>
              <div>
                <el-input
                  class="itemInput5"
                  placeholder="请输入银行账户"
                  v-model="codeValue"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="subMit" @click="goEnterpriseInfo">
          <span>提交</span>
          <img
            src="./../../../../../public/img/success/rightIcon.png"
            class="rightIcon"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script >
import NavBarHeader from "../../../../components/NavBarHeader";
import { getUploadlicense, seeCompanySubmit } from "./../../../../apis/api";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: { NavBarHeader },
  data() {
    // 这里存放数据
    return {
      hideUpload: false, //上传图片到达数量后隐藏上传图片样式
      fileLists: "", //上传的dom
      limitCount: 1, //只能上传一张
      dialogImageUrl: "", //上传的本地图片url
      dialogVisible: false,
      disabled: false,
      subjectValue: "", //需与主体证件机构名称一致
      openValue: "", //开户银行
      codeValue: "", //银行账户
      // 营业执照里的信息
      listData: {
        name: "", //企业名称
        establish_date: "", //日期
        reg_num: "", //社会信用代码
        type: "", //类型
        person: "", //法人
        business: "", //经营范围
        address: "", //经营场所
        file_url: "",
      },
      // 日期选择器
      pickerOptions: {
        disabledDate(v) {
          return v.getTime() < new Date().getTime() - 86400000;
        },
      },
    };
  },
  // 过滤器
  filters: {},
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 放大局部机械图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 删除局部机械图片
    handleRemove(file) {
      // 实现缩略图模板时删除文件
      let fileList = this.$refs.upload1.uploadFiles;
      let index = fileList.findIndex((fileItem) => {
        return fileItem.uid === file.uid;
      });
      fileList.splice(index, 1);
      //删除后恢复上传的图片
      this.hideUpload = false;
      this.listData = {};
    },
    // 控制上传图片格式
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpg";
      const isPNG = file.type === "image/png";
      const isLt20M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传图片的格式只能是 JPG或PNG 格式!");
      }

      if (!isPNG) {
        this.$message.error("上传图片的格式只能是 JPG或PNG 格式!");
      }

      if (!isLt20M) {
        this.$message.error("上传图片的大小不能超过 2M!");
      }
    },
    // 点击上传营业执照方法
    fileChange(file) {
      this.fileLists = this.$refs.upload1.uploadFiles;
      // 上传一张后隐藏上传图片
      this.hideUpload = this.fileLists.length >= this.limitCount;
      this.getUploadlicense(file);
    },
    // 上传图片接口
    async getUploadlicense(file) {
      console.log(file);
      const formData = new FormData();
      formData.append("file", file.raw);
      let res = await getUploadlicense(formData);
      if (res.data.result == "1") {
        this.listData = res.data.body;
      }
    },
    // 提交按钮
    goEnterpriseInfo() {
      this.seeCompanySubmit();
    },
    // 提交接口
    async seeCompanySubmit() {
      if (this.fileLists.length < 1) {
        this.$message.error("请上传营业执照图片！");
        return;
      }
      var exp = /^([1-9]{1})(\d{14}|\d{15}|\d{16}|\d{17}|\d{18})$/;
      // console.log(exp.test(card))
      if (exp.test(this.codeValue)) {
      } else {
        this.$message.error("请输入正确的银行卡账号");
        return;
      }
      let data = {
        file_url: this.listData.file_url,
        reg_num: this.listData.reg_num,
        address: this.listData.address,
        business: this.listData.business,
        person: this.listData.person,
        name: this.listData.name,
        type: this.listData.type,
        establish_date: this.listData.establish_date,
        company_name: this.subjectValue ? this.subjectValue : "",
        bank_name: this.openValue ? this.openValue : "",
        bank_num: this.codeValue ? this.codeValue : "",
      };
      let res = await seeCompanySubmit(data);
      console.log(res);
      if (res.data.result == "1") {
        this.$message.success(res.data.message);
        setTimeout(() => {
          this.$router.back(-1);
        }, 1500);
      }
      if (res.data.result == "101") {
        this.$message.warning(res.data.message);
        return;
      }
      if (res.data.result == "102") {
        this.$message.warning(res.data.message);
        return;
      }
      if (res.data.result == "110") {
        this.$message.warning(res.data.message);
        return;
      }
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  ctivated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.navBarHeader {
  background: #1c1e2b;
  z-index: 1000;
}
.container {
  width: 1180px;
  background-color: #fff;
  padding-top: 90px;
  box-sizing: border-box;
  margin: 0 auto;
  padding-bottom: 50px;
}
.enterpriseCertificationPage {
  background-color: #f0f2f5;
}
.titleBread {
  margin-left: 30px;
}
.realNameImg {
  width: 375px;
  height: 68px;
  margin-top: 34px;
  margin-left: 30px;
}
.flexList {
  display: flex;
  flex-direction: column;
  margin-top: 53px;
  margin-left: 30px;
}
.flexItem {
  display: flex;
}
.styleColor {
  color: red;
}
.titleName {
  font-size: 14px;
  color: #999;
}
.titleInfoName {
  font-size: 12px;
  color: #666;
  margin-left: 27px;
}
.upImgBox {
  width: 163px;
  height: 215px;
  margin-top: 15px;
  margin-left: 130px;
}
.upLoadImg1 {
  width: 164px;
  height: 215px;
}
.titleInput {
  font-size: 14px;
  color: #999;
  span {
    color: #ff0000;
    font-size: 10px;
  }
}
.upInputBox {
  display: flex;
  margin-top: 20px;
}
.inputBox {
  width: 684px;
  height: 321px;
  background: #f6f7fb;
  border-radius: 4px;
  margin-left: 31px;
}
.itemInputBox {
  margin: 20px 20px 0 20px;
}
.itemInput {
  width: 644px;
  height: 40px;
}
.itemInput3 {
  width: 665px;
  height: 40px;
}
.itemInput1 {
  margin-top: 20px;
  width: 642px;
  height: 40px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
.itemInput2 {
  width: 312px;
  height: 40px;
}
.itemInput4 {
  width: 280px;
  height: 40px;
  margin-left: 35px;
}
.itemInput5 {
  width: 280px;
  height: 40px;
  margin-left: 8px;
}
.inputTypeBox {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.openName {
  font-size: 14px;
  color: #999;
}
.footerItem {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.openNameBox {
  margin-left: 35px;
}
.bankBox {
  display: flex;
  margin-top: 20px;
}
.itemBank {
  display: flex;
  align-items: center;
}
.itemBank1 {
  display: flex;
  align-items: center;
  margin-left: 27px;
}
.subMit {
  margin-left: 105px;
  margin-top: 40px;
  line-height: 40px;
  width: 149px;
  height: 40px;
  background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.rightIcon {
  width: 37px;
  height: 11px;
  margin-left: 10px;
}
.upImgName {
  margin-top: 10px;
  margin-left: 168px;
  font-size: 10px;
  color: #999;
}
.upImgBox1 {
  display: flex;
}
</style>
